// 主内容区域样式
.main-content {
    height: calc(100vh - #{$head-height}px);
    margin-left: #{$left-width}px;

    // 主内容任务栏样式
    .content-tabs {
        height: #{$tab-height}px;
        background: $frame-content-tab-bgcolor;
        border-bottom: 1px solid $frame-content-tab-bdcolor;
        position: relative;
        line-height: #{$tab-height}px;

        button {
            border: 0;
            height: #{$tab-height - 1}px;
            width: #{$tab-height}px;
            outline: none;
        }

        .roll-nav {
            font-size: 12px;
            position: absolute;
            width: 30px;
            height: #{$tab-height - 1}px;
            text-align: center;
            color: $frame-content-tab-rollbar-color;
            z-index: 2;
            top: 0;
            background: inherit;
        }

        .roll-nav:hover {
            background: $frame-content-tab-rollbar-hover-color;
            cursor: pointer;
        }

        .roll-left {
            left: 0;
            border-right: solid 1px $frame-content-tab-rollbar-bdcolor;
        }

        .roll-right {
            right: 0;
            border-left: solid 1px $frame-content-tab-rollbar-bdcolor;
        }

        .roll-right.tabReload {
            width: 60px;
        }

        .roll-right.tabRight {
            right: 60px;
        }

        .page-tabs {
            margin-left: 30px;
            width: 100000px;
            overflow: hidden;
            height: #{$tab-height - 1}px;

            .page-tabs-content {
                float: left;

                .menuTab {
                    color: $frame-content-tab-pagebar-color;
                    display: block;
                    float: left;
                    border-right: solid 1px $frame-content-tab-pagebar-bdcolor;
                    padding: 0 16px;
                    -webkit-transition: all .3s ease-out 0s;
                    transition: all .3s ease-out 0s;
                    font-size: $frame-content-tab-pagebar-fontsize;

                    i {
                        color: $frame-content-tab-pagebar-icon-color;
                        font-size: $frame-content-tab-pagebar-fontsize;
                        &:hover{
                            font-weight: bolder;
                            color: $frame-content-tab-pagebar-active-color;
                        }
                    }

                    &:hover {
                        background: $frame-content-tab-pagebar-hover-bgcolor;
                        cursor: pointer;
                    }

                    &.active {
                        background: $frame-content-tab-pagebar-active-bgcolor;
                        color: $frame-content-tab-pagebar-active-color;
                    }
                }

            }

        }
    }

    #content-main {
        position: relative;
        overflow: hidden;
        height: calc(100vh - #{ $head-height + $tab-height }px);

        .index_iframe {
            position: absolute;
            left: 0;
            top: 0;
        }
    }
}


// 迷你菜单模式页面布局
.mini-menu {
    .main-content {
        margin-left: #{$mini-left-width}px;
    }
}
